<!-- 模板 -->
<template>
  <div class="login">
    <!-- 1.头部 -->
    <div class="header">
      <van-icon
        name="arrow-left"
        class="head-left-icon"
        @click="$router.go(-1)"
      />
    </div>
    <!-- 2.banner图片 -->
    <div class="banner">
      <div class="img">
        <img src="http://42.192.80.102/Printing man-img/yinshua.png" alt="" />
      </div>
    </div>
    <!-- 3.注册表单 -->
    <div class="form">
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="用户名"
          label="CN+86 "
          placeholder="请输入手机号码"
          :rules="rules.phone"
        />
        <van-field
          v-model="password"
          type="password"
          placeholder="输入密码"
          :rules="rules.password"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
      <div class="text">
        登录即代表同意
        <a href="##">《用户协议》</a>
        和<a href="##">《隐私政策》</a>
      </div>
    </div>
    <!-- 4.尾部 -->
    <div class="footer">
      还没账号 <a href="##" @click="$router.push('/register')">点击注册</a>
    </div>
    <!-- 5.弹出框 -->
    <div class="msg" v-show="show">
      <van-icon :name="iconName" />{{ message }}
    </div>
  </div>
</template>
<script>
import request from "../utils/request.js";
// import { Toast } from "vant";
// Toast.setDefaultOptions({ duration: 2000 });
export default {
  // name: '',
  data() {
    return {
      phone: "",
      password: "",
      token: "",
      message: "",
      show: false,
      iconName: "fail",
      rules: {
        phone: [
          { required: true, message: "电话不能为空" },
          { pattern: /^1[3-9]\d{9}$/, message: "非法的电话号码" },
        ],
        password: [
          { required: true, message: "请填写密码" },
          { pattern: /^\w{6,12}$/, message: "密码数字字母下划线6-12位" },
        ],
      },
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    onSubmit() {
      this.login();
    },
    // 登录请求
    async login() {
      console.log(this.phone);
      let options = {
        url: "users/login",
        type: "post",
        data: {
          phone: this.phone,
          userPassword: this.password,
        },
      };
      try {
        let { data: res } = await request(options);
        console.log(res);
        if (res.meta.status !== 200) {
          this.iconName = "fail";
          this.message = res.meta.msg;
          this.show = true;
          setTimeout(() => {
            this.show = false;
          }, 2000);
          return;
          // return Toast.fail(res.meta.msg);
        }
        // this.iconName = "success";
        // this.message = res.meta.msg;
        // this.show = true;
        // setTimeout(() => {
        //   this.show = false;
        // }, 2000);
        // Toast.success(res.meta.msg);
        this.token = res.token;
        console.log(res.id);
        sessionStorage.setItem("user-login", JSON.stringify(res));
        this.$router.push("/index");
      } catch (error) {
        console.log(error);
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.login {
  margin-top: 0.88rem;
  line-height: 1.5;
  .header {
    position: fixed;
    width: 100%;
    height: 0.88rem;
    left: 0px;
    top: 0px;
    display: flex;
    align-items: center;
    background: #fff;
    z-index: 999;
    .head-left-icon {
      padding-left: 0.2rem;
      font-size: 0.5rem;
      color: #aaa;
    }
  }
  .banner {
    padding-top: 0.45rem;
    width: 100%;
    display: flex;
    justify-content: center;
    .img {
      width: 5.32rem;
      height: 2.34rem;
      img {
        display: block;
        width: 100%;
      }
    }
  }
  .form {
    margin-top: 1.4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /deep/.van-cell {
      &::after {
        border: none;
      }
    }
    .van-form {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      .van-field {
        width: 5.54rem;
        border-radius: 3px;
        margin-bottom: 0.3rem;

        font-size: 14px;
        // position: relative;
        overflow: visible;
        padding: 0;
        /deep/.van-field__label {
          height: 0.88rem;
          background: #f8f8f8;
          width: 1.9rem;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          margin-right: 0;
          span {
            font-size: 0.28rem;
            color: #000;
          }
          &::after {
            position: absolute;
            left: 100%;
            content: "";
            display: block;
            width: 1px;
            height: 0.4rem;
            background: #000;
          }
        }
        /deep/.van-field__body {
          background: #f8f8f8;
          height: 0.88rem;
          font-size: 0.28rem;
          color: #afafaf;
          padding: 0 0.2rem;
        }
        /deep/.van-field__error-message {
          padding: 0 0.2rem;
          margin-top: 0.2rem;
          font-size: 0.24rem;
        }
      }
      .van-button {
        font-size: 0.36rem;
        width: 5.54rem;
        border-radius: 3px;
        height: 1rem;
      }
    }
    .text {
      width: 5.54rem;
      color: #b1b1b1;
      font-size: 0.24rem;
      display: flex;
      justify-content: center;
      a {
        color: #000;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0.48rem;
    display: flex;
    width: 100%;
    font-size: 0.28rem;
    justify-content: center;
    a {
      padding-left: 0.1rem;
      color: #ffbe4a;
    }
  }
  .msg {
    padding: 0.2rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    border-radius: 0.2rem;
    color: #fff;
    font-size: 0.3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .van-icon {
      font-size: 0.4rem;
      color: #fff;
      margin-bottom: 0.1rem;
    }
  }
}
// /deep/.van-toast--fail {
//   @toast: default width 4rem;
//   // // @toast: max width 4rem;
//   // width: 4rem !important;
//   // display: block;
// }
</style>
